export default {
  data() {
    return {
      rgbSwitch: false,
      rgbDate: {
        image_raw: '', // video_capture_rgb_resp
        image_encode: '', // video_view_rgb_resp base64 jpg数据
        timestamp: 0, // video_view_rgb_resp
        video_file: '', // video_record_rgb_resp
        video_time: 0 // video_record_rgb_resp  已经录制时长，单位s
      }
    };
  },
  watch: {
    rgbSwitch(val) {
      console.log('rgbSwitch===', val);
      if (val) {
        // 建立depth_websocket_  向其发送护具
        this.init_Rgb_WebSocket();
      } else {
        // 页面销毁时关闭长连接
        this.rgb_websocket_close();
      }
    }
  },

  created() {},
  destroyed: function() {
    // 页面销毁时关闭长连接
    this.rgb_websocket_close();
  },
  methods: {
    init_Rgb_WebSocket() {
      // 初始化weosocket
      const rgb_url = this.rgbRgbUrl; // 这个地址由后端童鞋提供
      this.rgb_websocket = new WebSocket(rgb_url, 'rtp');
      console.log('rgb_url当前websocket地址====', rgb_url);
      console.log('加了类型返回什么？', this.rgb_websocket);
      this.rgb_websocket.onmessage = this.rgb_websocket_onmessage;
      this.rgb_websocket.onopen = this.rgb_websocket_onopen;
      this.rgb_websocket.onerror = this.rgb_websocket_onerror;
      this.rgb_websocket.onclose = this.rgb_websocket_close;
    },
    rgb_websocket_onopen() {
      // 连接建立之后执行send方法发送数据
      this.rgb_websocket_send({
        type: 'video_view_rgb_req', // video_view_rgb_req//video_record_rgb_req
        data: {
          action: 'start', // "start","stop"
          hd: 0 // 0:false, 1:true
        }
      });
      console.log('连接建立之后执行send方法发送数据');
    },
    rgb_websocket_onerror() {
      // 连接建立失败重连
      setTimeout(() => {
        this.rgbSwitch = false;
      }, 1 * 1000);
    },
    rgb_websocket_onmessage(e) {
      // 接收websocet参数，并作json结构处理
      const temp = JSON.parse(e.data);
      try {
        temp.data.image_encode =
          'data:image/jpeg;base64,' + temp.data.image_encode;
        this.rgbDate = temp.data;
        console.log('rgb_数据接收', temp.type);
        if (temp.type == 'video_view_rgb_req') {
          // 拍照，需要模拟下载数据
        } else if (temp.type == 'video_record_rgb_req') {
          // 摄像
        }
      } catch (error) {
        console.log('rgb_数据接收解析错误', error);
      }
      console.log('onmessage===rgb_数据接收所有数据==', e);
    },
    rgb_websocket_send(data) {
      // 数据发送
      this.rgb_websocket.send(JSON.stringify(data));
      console.log(
        '_websocket_send-JSON.stringify(data)--',
        JSON.stringify(data)
      );
    },
    rgb_websocket_close(e) {
      this.rgb_websocket.close();
      this.rgb_websocket_send({
        type: 'video_view_rgb_req', // video_view_rgb_req//video_record_rgb_req
        data: {
          action: 'stop', // "start","stop"
          hd: 0 // 0:false, 1:true
        }
      });
      setTimeout(() => {
        this.rgbSwitch = false;
        if (!this.irSwitch && !this.depthSwitch) {
          this.allVideoSwitch = false;
        }
      }, 1 * 1000);
      // 关闭
      console.log('断开关闭--rgb_websocket__close--', e);
    }
  }
};
